<script setup lang="tsx">

import { reactive } from 'vue';
import { PageEntity } from '@/entity/page.entity';
import { useTable } from '@/hooks/common/table';
import { postAction } from '@/service/request/action';
import { getOperateLogPageApi } from '@/service/path/operate-log';
import OperateLogSearch from '@/views/system/operate-log/modules/operate-log-search.vue';
import dayjs from 'dayjs';
import { FilterEnum } from '@/enum/filter.enum';

const state = reactive({
  pageInfo: new PageEntity()
});
const {
  columns,
  columnChecks,
  data,
  loading,
  mobilePagination,
  searchParams,
  getData,
  clickSearch,
  clickReset
} = useTable({
  apiFn: () => postAction(getOperateLogPageApi, state.pageInfo),
  showTotal: true,
  immediate: true,
  apiParams: {
    reqTime: null
  },
  pageInfo: state.pageInfo,
  formatSearchParams: [
    {
      key: 'reqTime',
      method: (key, value) => {
        return {
          matchMode: FilterEnum.BETWEEN,
          value: `${dayjs(value).format('YYYY-MM-DD 00:00:00')},${dayjs(value).format('YYYY-MM-DD 23:59:59')}`
        }
      }
    }
  ],
  columns: () => [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '请求ip',
      key: 'reqIp'
    },
    {
      title: '请求时间',
      key: 'reqTime',
      render: (row: Api.System.OperateLog) => {
        return dayjs(row.reqTime).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    {
      title: '请求地址',
      key: 'reqUrl',
      ellipsis: {
        tooltip: {
          contentClass: 'ellipsis-tooltip'
        }
      },
    },
    {
      title: '请求参数',
      key: 'reqParams',
      ellipsis: {
        tooltip: {
          contentClass: 'ellipsis-tooltip'
        }
      },
    },
    {
      title: '响应结果',
      key: 'result',
      ellipsis: {
        tooltip: {
          contentClass: 'ellipsis-tooltip'
        }
      },
    },
    {
      title: '操作人',
      key: 'operator'
    }
  ]
})
</script>

<template>
  <div class="flex-col-stretch gap-16px lt-sm:overflow-auto">
    <OperateLogSearch v-model:model="searchParams" @click-reset="clickReset" @click-search="clickSearch" />
    <n-card title="日志列表" class="flex-1">
      <n-data-table
        :columns="columns"
        :data="data"
        :loading="loading"
        remote
        :row-key="row => row.id"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </n-card>
  </div>
</template>

<style scoped>

</style>
